<template>
  <el-dialog title="关键词详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form size="medium" :model="dataForm" ref="dataForm" label-width="120px">
      <el-form-item label="匹配模式" prop="matchPattern">
        <el-select v-model="dataForm.matchPattern" placeholder="请选择" disabled>
          <el-option label="完全匹配" value="1"></el-option>
          <el-option label="包含匹配" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键词" prop="keywords" disabled>
        <el-input v-model="dataForm.keywords"></el-input>
      </el-form-item>
      <el-form-item label="回复类型" prop="replyType">
        <el-select v-model="dataForm.replyType" placeholder="请选择" disabled>
          <el-option label="文字" value="1"></el-option>
          <el-option label="素材" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="文字内容" prop="content" v-if="dataForm.replyType == 1">
        <el-input type="textarea" rows="6" v-model="dataForm.content" disabled></el-input>
      </el-form-item>
      <el-form-item label="选择素材" prop="materialName" v-if="dataForm.replyType == 2">
        <el-input v-model="dataForm.materialName" disabled>
          <el-button slot="append" disabled>选择</el-button>
        </el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer"></span>

  </el-dialog>
</template>

<script>
  import { getWxKeywordsObj } from '@/api/mp/wxkeywords'

  export default {
    data(){
      return {
        visible: false,
        dataForm: {
          id:'',
          matchPattern: '',
          keywords: '',
          replyType: '',
          content: '',
          materialName: ''
        }
      }
    },
    methods: {
      init(id){
        this.visible = true
        for(let key in this.dataForm){
          this.dataForm[key] = ''
        }
        this.$set(this.dataForm,'matchPattern','1')
        this.$set(this.dataForm,'replyType','1')
        this.$set(this.dataForm,'id', id || 0)
        this.$nextTick(() => {
          if (this.dataForm.id) {
            getWxKeywordsObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
              this.$set(this.dataForm,'matchPattern',response.data.data.matchPattern + '')
              this.$set(this.dataForm,'replyType',response.data.data.matchPattern + '')
            })
          }
        })
      }
    }
  }
</script>

<style>
  table {
    width: 100%;
  }

  tr td {
    border: solid 1px #e7e7e7;
  }
</style>
